import React from 'react';
import { Cascader } from 'antd';
import { CheckOutlined } from '@ant-design/icons';

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];

const CustomCascader = () => {
  const dropdownRender = (menus) => {
    // 如果 menus 不是数组，直接返回空的 div
    if (!Array.isArray(menus)) {
      return <div />;
    }
  
    return (
      <div>
        {/* 渲染选中的菜单项 */}
        {menus.map((menu, index) => (
          <div key={index} style={{ padding: '4px 8px' }}>
            {menu.label}
          </div>
        ))}
        {/* 渲染选中项的子菜单项 */}
        {menus.map((menu, index) => {
          if (menu.children && menu.children.length > 0 && menu.selected) {
            return menu.children.map((child, childIndex) => (
              <div key={childIndex} style={{ paddingLeft: 20 }}>
                {child.label}
              </div>
            ));
          }
          return null;
        })}
      </div>
    );
  };
  
  

  return (
    <Cascader
      allowClear={false}
      options={options}
      size="large"
      style={{ width: '100%' }}
      
      fieldNames={{
        label: 'label',
        value: 'value'
      }}
      displayRender={(label) => { // 选中时隐藏域名称，仅显示项目名称
        const tag = label[1].split(" ");
        return tag[tag.length - 1];
      }}
      dropdownRender={dropdownRender}
    />
  );
};

export default CustomCascader;
